<template>
    <public-dialog
            :title="'利息支付计算'"
            :width="'60%'"
            :confirmButtonTitle="'确认'"
            v-model:visible="visible"
            @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-form
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    label-width="150"
            >
                <label class="d-flex m-b20">借款信息</label>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="借款单位">
                            <el-input disabled :placeholder="form.companyName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="金融机构">
                            <el-input disabled :placeholder="form.institutionName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="担保方式">
                            <el-input
                                    disabled
                                    :placeholder="['','信用','担保','抵押','质押'][form.guaranteeType] || '-'"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="贷款用途">
                            <el-input disabled :placeholder="form.loanPurpose"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="授信时间">
                            <el-input disabled :placeholder="form.creditTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="贷款余额">
                            <el-input disabled :placeholder="form.loanBalance"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <label class="d-flex m-b20">利息信息</label>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="最新利率">
                            <el-input disabled :placeholder="form.currentInterestRate"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="调整当日利率">
                            <el-input disabled :placeholder="form.lastInterestRate"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年利率调整日期">
                            <el-input disabled :placeholder="form.interestRateUpdateTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <label class="d-flex m-b20">计提信息</label>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="计提时间" prop="startTime">
                            <el-date-picker
                                    size="large"
                                    v-model="form.time"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    @change="timeChange"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="利息支付计算结果" prop="interestAmount">
                          <div class="d-flex a-center">
                              <el-input
                                  disabled
                                  v-model="form.interestAmount"
                                  placeholder="自动计算"
                              ></el-input>
                              <el-button
                                  class="m-l10" color="#fff8f6;"
                                  style="color: #ff7b56;
                                  border-color: #ff7b56;
                                  background-color: #fff8f6;"
                                  @click="onCount"
                              >利息支付计算</el-button>
                          </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </public-dialog>
</template>

<script setup>
import {ElCol, ElDatePicker, ElDivider, ElForm, ElFormItem, ElMessage, ElRow} from "element-plus";
import PublicDialog from "@/components/PublicDialog.vue";
import {reactive, ref} from "vue";
import {financingApi, interestManagement} from "@/api/businessFinance";

const visible = ref(false);
const form = reactive({
    companyName:'',
    institutionName:'',
    guaranteeType:'',
    loanPurpose:'',
    creditTime:'',
    loanBalance:'',
    currentInterestRate:'',
    lastInterestRate:'',
    interestRateUpdateTime:'',
    time:'',
    startTime:'',
    endTime:'',
    interestAmount:'',
    interestRate:'',
    drawRecordId:''
});
const rules = reactive({
    startTime:[
        { required: true, message: '请选择计提时间!', trigger: 'change' },
    ],
    interestAmount:[
        { required: true, message: '请去计算支付计算结果!', trigger: 'blur' },
    ]
});

/**
 * 时间处理
 * @param e
 */
const timeChange = (e) => {
    if(!e || e instanceof Array && e.length === 0){
        form.startTime = '';
        form.endTime = '';
    }
    if(e && e instanceof Array && e.length>0){
        form.startTime = e[0]
        form.endTime = e[1];
    }
}

/**
 * 计算利息
 */
const formRef = ref(null);
const onCount = () => {
    if(form.startTime===''){
        return ElMessage.warning('计提时间不能为空!');
    }
    financingApi.interestCount({
        loanBalance:form.loanBalance,
        interestRate:form.currentInterestRate,
        startTime:form.startTime,
        endTime:form.endTime,
        day:365
    }).then(res=>{
        if(res.code === '200'){
            form.interestAmount = res.data;
            formRef.value.clearValidate('interestAmount');
        }
    });
}

/**
 * 确认
 */
const emits = defineEmits(['onSuccess']);
const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            // 利息支付
            interestManagement.addBankLoanInterest({
                startTime:form.startTime,
                endTime:form.endTime,
                drawRecordId:form.drawRecordId,
                loanBalance:form.loanBalance,
                lastInterestRate:form.lastInterestRate,
                interestRateUpdateTime:form.interestRateUpdateTime,
                currentInterestRate:form.currentInterestRate,
                interestAmount:form.interestAmount
            }).then(res=>{
                if(res.code==='200'){
                    ElMessage.success('新增利息支付计算成功!');
                    emits('onSuccess');
                    visible.value = false;
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**
 * 打开弹窗
 */
const open = (row) =>{
    for(let k1 in row){
        for (let k2 in form){
            if(k1 === k2){
                form[k2] = row[k1];
            }
        }
    }
    visible.value = true;
}

defineExpose({
    open
});
</script>

<style scoped>

</style>